<!-- 首页面板 -->
<template>
  <div class="content">
    <div class="left">
      <div class="boxView">
        <box-view></box-view>
      </div>
      <div class="attributeView">
        <attribute-view @getClientXClientY="getClientXClientY" @showChoseBox="showChoseBox" :colorV="chosseColor" :indexV="chosseIndex" :SlidingIsProhibited="SlidingIsProhibited"></attribute-view>
      </div>
    </div>
    <div class="right">
      <div class="alignView">
        <align-view></align-view>
      </div>
      <div class="canvasView">
        <canvas-view></canvas-view>
      </div>
    </div>
    <div class="get-code" ref="getColor" v-show="isGetColorShow">
      <ColorPicker @getColor="getColor"></ColorPicker>
    </div>
    <div class="chose-box" v-show="choseBoxShow" ref="choseBox">
      <chose-box :choseData="choseBoxView" :cssAttributeIndex="cssAttributeIndex" @choseItem="showChoseBox"></chose-box>
    </div>
  </div>
</template>
<script>
import boxView from "@/components/Home/boxView.vue";
import attributeView from "@/components/Home/attributeView.vue";
import alignView from "@/components/Home/alignView.vue";
import canvasView from "@/components/Home/canvasView.vue";
import ColorPicker from "@/components/getColor/index.vue";
import choseBox from "@/components/choseBox/index.vue";
import cssAttribute from '@/components/Home/js/cssAttribute.js'
export default {
  name: "homeApp",
  components: {
    boxView,
    attributeView,
    alignView,
    canvasView,
    ColorPicker,
    choseBox,
  },
  data() {
    return {
      isGetColorShow:false,
      chosseColor:'',//当前选择的颜色
      chosseIndex:0,//当前选择的颜色的索引
      attributeListINdex:'',
      choseBoxView:[],//当前选择的盒子
      choseBoxShow:false,
      SlidingIsProhibited:false,//是否禁止滑动
      cssAttributeIndex:0,//当前选择的属性的索引
    }
  },
  created() {
    if(localStorage.getItem('choseBox')){
      localStorage.removeItem('choseBox') 
    }
  },
  methods: {
    getClientXClientY(x,y,index) {
      this.attributeListINdex = index
      let left = x - 100
      if(left < 20){
        left = 20
      }
      this.$refs.getColor.style.left = left + 'px'
      this.$refs.getColor.style.top = (y - 280) + 'px'
      this.isGetColorShow = true
      this.SlidingIsProhibited = this.isGetColorShow
    },
    getColor(color) {
      this.chosseColor = color.toString()
      this.chosseIndex = Number(this.attributeListINdex)
      this.isGetColorShow = false
      this.SlidingIsProhibited = false//解除禁止滑动
    },
    showChoseBox(data,index,x,y) {
      this.cssAttributeIndex = index
      const availHeight = screen.availHeight;//获取屏幕高度
      this.$refs.choseBox.style.left = (x+13) + 'px'
      this.$refs.choseBox.style.bottom = (availHeight - y - 76) + 'px'
      this.choseBoxView = data.choseBox
      cssAttribute[index].choseBoxShow = !data.choseBoxShow
      this.choseBoxShow = cssAttribute[index].choseBoxShow
      this.SlidingIsProhibited = this.choseBoxShow
      if(this.choseBoxShow){
        if(localStorage.getItem('choseBox')){
          cssAttribute[localStorage.getItem('choseBox')].choseBoxShow = false
        }
        localStorage.setItem('choseBox',index)
      }else{
        localStorage.removeItem('choseBox')
      }
    },
  }
};
</script>
<style scoped lang="scss">
.content {
  background-color: #f5f5f5;
  width: 100vw;
  height: 100vh;
  display: flex;
  user-select: none;
  .get-code{
    position: fixed;
    z-index: 1;
  }
  .chose-box{
    position: fixed;
    z-index: 1;
  }
  .left {
    flex: 1;
    height: 100vh;
    .boxView {
        height: 50%;
    }
    .attributeView {
        height: 50%;
    }
  }
  .right {
    flex: 5;
    height: 100vh;
    .alignView {
        height: 5%;
    }
    .canvasView {
        height: 95%;
    }
  }
}
</style>
